<!doctype html>
<html>
  <div id="content"></div>
  <input type="button" value="en" id="en" />
  <input type="button" value="fr" id="fr" />

  <script type="importmap">
    {
      "imports": {
        "@messageformat/runtime": "../../packages/runtime/esm/runtime.js",
        "@messageformat/runtime/lib/cardinals": "../../packages/runtime/esm/cardinals.js",
        "make-plural/cardinals": "../../node_modules/make-plural/cardinals.mjs"
      }
    }
  </script>

  <script type="module">
    import messages from './bundle.mjs';

    function showContents(lc) {
      var colors = messages[lc].colors;
      var plural = messages[lc].sub.folder.plural;
      var el = document.getElementById('content');
      el.innerHTML = '';
      [
        colors.red(),
        colors.blue(),
        colors.green(),
        plural.test({ NUM: 1 }),
        plural.test({ NUM: 2 })
      ].forEach(function (s) {
        el.innerHTML += '<div>' + s + '</div>';
      });
      localStorage.setItem('lang', lc);
    }

    showContents(localStorage.getItem('lang') || 'en');
    document.getElementById('en').onclick = showContents.bind(null, 'en');
    document.getElementById('fr').onclick = showContents.bind(null, 'fr');
  </script>
</html>
